<template>
  <div>
    <el-card style="overflow-y:auto;overflow-x:hidden;">
      <div slot="header" class="clearfix">
        <span>班级</span>
        <el-tag
          style="margin-bottom: -5px;"
          v-show="title"
          effect="dark">
          {{ title }}
        </el-tag>
      </div>
      <div>
        <el-table
          :data="data"
          :height="tableHeight"
          :max-height="tableHeight"
          :cell-style="table_style"
          border
          style="width: 100%">
          <el-table-column
            align="center"
            prop="code"
            label="学号">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="学生">
          </el-table-column>
          <el-table-column
            align="center"
            prop="actived"
            label="激活">
            <template v-slot:default="{ row }">
              <el-switch
                v-model="row.actived"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作">
            <template v-slot:default="{ row }">
              <el-button type="text">重置密码</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "StudentForm",
  props: {
    data: Array,
    title: String,

  },
  data() {
    return {
      tableHeight: window.innerHeight - 220,
    }
  },
  methods: {
    table_style({columnIndex}) {
      if (columnIndex !== 0) {
        return 'color: #0EA5E9;'
      }
    },
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
